<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="1000"  >
      <div class="seat-form-violation">
        <a-row type="flex"  :gutter="[16,16]">
            <a-col :span="12" class="seat-form-violation_row">
                <span class="seat-form-violation_label">部门：</span>
                <span>某某部门</span>
            </a-col>
            <a-col :span="12">
                <span class="seat-form-violation_label">姓名：</span>
                <span>张三</span>
            </a-col>
        </a-row>
        <a-row type="flex" class="seat-form-violation_row" :gutter="[16,16]">
            <a-col :span="24">
                <span class="seat-form-violation_label">违规次数：</span>
                <span>3</span>
            </a-col>
        </a-row>
      </div>
       <!--引用表格-->
   <BasicTable @register="registerTable" @edit-end="handleEditEnd" :rowSelection="rowSelection">
     <!--插槽:table标题-->
      <template #tableTitle>
      </template>
      <!--字段回显插槽-->
      <template v-slot:bodyCell="{ column, record, index, text }">
      </template>
    </BasicTable>
  </BasicModal>
</template>

<script lang="ts" setup>
    import {ref, computed, unref,reactive} from 'vue';
    import {BasicModal, useModalInner} from '/@/components/Modal';
    import {BasicForm, useForm} from '/@/components/Form/index';
      import { useListPage } from '/@/hooks/system/useListPage';
    import {BasicTable} from '/@/components/Table';
    import {columnsItem,searchItemFormSchema} from '../GbiacSeatViolations.data';
    import {saveOrUpdate, getImportUrl,getExportUrl} from '../GbiacSeatViolations.api';
    const queryParam = reactive<any>({});
    // Emits声明
    const emit = defineEmits(['register','success']);
    const isUpdate = ref(true);
    const isDetail = ref(false);
    //注册table数据
  const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({
      tableProps:{
           title: '席位值班人员工作违规统计',
           api: '',//list,
           columns:columnsItem,
           canResize:false,
           formConfig: {
              //labelWidth: 120,
              schemas: searchItemFormSchema,
              autoSubmitOnEnter:true,
              showAdvancedButton:true,
              fieldMapToNumber: [
              ],
              fieldMapToTime: [
              ],
            },
           actionColumn: {
               width: 120,
               fixed:'right'
            },
            beforeFetch: (params) => {
              return Object.assign(params, queryParam);
            },
            dataSource:[{
              violationTime:'2024-12-24 23:22:00',
              violationSeatName:'西协调',
              causeAnalysis:'去食堂吃饭未申请',
              violationReason:'离岗',
              remark:'去食堂吃饭未申请'
            }],
            showActionColumn:false,//是否显示操作列
      },
       exportConfig: {
            name:"席位值班人员工作违规统计",
            url: getExportUrl,
            params: queryParam,
          },
          importConfig: {
            url: getImportUrl,
            success: handleSuccess
          },
  })
   /**
    * 成功回调
    */
    function handleSuccess() {
      (selectedRowKeys.value = []) && reload();
   }
    /**
    * 行编辑回调函数
    * @param param
    */
    function handleEditEnd({ record, index, key, value }: Recordable) {
        console.log(record, index, key, value);
        return false;
    }
    //表单赋值
    const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
      setModalProps({confirmLoading: false,showCancelBtn:!!data?.showFooter,showOkBtn:!!data?.showFooter});
      isDetail.value = !!data?.showFooter;
    });
    const [registerTable, {reload},{ rowSelection, selectedRowKeys }] = tableContext
    //设置标题
    const title = computed(() => (!unref(isUpdate) ? '新增' : !unref(isDetail) ? '详情' : '编辑'));
 
</script>

<style lang="less" scoped>
.seat-form-violation{
    padding: 40px 40px 0 40px;
    &_row{
        margin-bottom: 20px
    }
    &_label{
        font-weight: 800;
        font-size: 16px;
    }
}
	/** 时间和数字输入框样式 */
  :deep(.ant-input-number) {
    width: 100%;
  }

  :deep(.ant-calendar-picker) {
    width: 100%;
  }
</style>